﻿@model KL.Store.Web.Models.ProductModel
@using KL.Store.Core
@{
    Layout = null;
    var productDetailsFullClass = "col-xs-12 first last product-review";
    var productImageClass = "col-xs-6 first last product-images";
    var productDetailsClass = "col-xs-6 product-prices";
    if (Parameters.Theme == "HA")
    {
        productDetailsFullClass = "col-xs-12 col-sm-12 col-md-12 col-lg-12 first last product-review";
        productImageClass = "col-xs-12 col-sm-12 col-md-7 col-lg-7 first last product-images";
        productDetailsClass = "col-xs-12 col-sm-12 col-md-5 col-lg-5 product-prices last";
    }
}
<div class="@productDetailsFullClass">
    <div class="@productImageClass">
        @if (Parameters.ProductViewSliderType == 1)
        {
            <div class="product-slider">
                <div>
                    <ul id="product-slider">

                        @{ bool thumbnailFounded = false; }
                        @if (Parameters.ProductDetailShowSingleImage || (Model.ProductImages != null && Model.ProductImages.Count >= 1))
                        {
                            thumbnailFounded = true;
                            foreach (var productImage in Model.ProductImages)
                            {
                            <li>
                                <img src="@(Parameters.WebSiteImageUrl)/product-large/@(productImage.ProductId)_@(productImage.ImageId).jpg" data-zoom-image="@(Parameters.WebSiteImageUrl)/product-big/@(productImage.ProductId)_@(productImage.ImageId).jpg" />

                            </li>
                            }
                        }
                        else
                        {
                            <li>
                                <img src="/Images/@Parameters.Theme/product-image-not-found-400x.jpg" />
                            </li>
                        }
                    </ul>
                    @if (thumbnailFounded)
                    {
                        <div class="product-thumb-box">
                            <ul class="product-thumbs">
                                @{int thumbCounter = 0;
                                  foreach (var productThumb in Model.ProductImages)
                                  {
                                    <li id="slide@(thumbCounter + 1)"><a href="#@(thumbCounter + 1)" data-slide="@(thumbCounter + 1)">
                                        <img src="@(Parameters.WebSiteImageUrl)/product-small/@(productThumb.ProductId)_@(productThumb.ImageId).jpg" /></a></li>
                                      thumbCounter++;
                                  }
                                }
                            </ul>
                        </div>
                    }
                </div>
                <script>
                    $(function ()
                    {
                        var v3slider = $('#product-slider').slippry({
                            // general elements & wrapper
                            slippryWrapper: '<div class="slippry_box thumbnails" />',
                            // options
                            transition: 'horizontal',
                            pager: false,
                            auto: true,
                            pause: 4500,
                            onSlideBefore: function (el, index_old, index_new)
                            {
                                $('.product-thumbs a img').removeClass('active').parent().css({ "background": "none" });
                                $('img', $('.product-thumb-box .product-thumbs li a')[index_new]).addClass('active');
                            @if (Parameters.Theme == "HA")
                            {
                                @Html.Raw("$('img', $('.product-thumb-box .product-thumbs li a')[index_new]).parent().css({ \"background\": \"url('/Images/HA/slider-thumbnail-top-background.jpg') repeat-x\" });");
                            }
                                $('body').removeClass('loading');
                                $.removeData(".product-slider #product-slider li a img", 'elevateZoom');
                                $('.zoomContainer').remove();
                                $('.product-slider #product-slider li a img').elevateZoom({
                                    loadingIcon: false,
                                    responsive: true,
                                    cursor: "zoom-in",
                                    zoomType: "inner",
                                    scrollZoom: true,
                                    zoomWindowWidth: 400,
                                    zoomWindowHeight: 400,
                                });
                            }
                        });

                        $('.product-thumb-box .product-thumbs li a').click(function ()
                        {
                            v3slider.goToSlide($(this).data('slide'));
                            return false;
                        });
                    });
                </script>
            </div>
        }
        else
        {
            <div class="product-flexslider">
                <div id="slider" class="flexslider">
                    <ul class="slides">
                        @if (Parameters.ProductDetailShowSingleImage || (Model.ProductImages != null && Model.ProductImages.Count >= 1))
                        {
                            foreach (var productImage in Model.ProductImages)
                            { 
                            <li>
                                <a>
                                    @if (Parameters.Theme == "HAsd")
                                    {
    
                                        <img src="@(Parameters.WebSiteImageUrl)/product-large/@(productImage.ProductId)_@(productImage.ImageId)_w.jpg" data-zoom-image="@(Parameters.WebSiteImageUrl)/product-big/@(productImage.ProductId)_@(productImage.ImageId).jpg" />
                                    }
                                    else
                                    {
                                        <img src="@(Parameters.WebSiteImageUrl)/product-large/@(productImage.ProductId)_@(productImage.ImageId).jpg" data-zoom-image="@(Parameters.WebSiteImageUrl)/product-big/@(productImage.ProductId)_@(productImage.ImageId).jpg" />
   
                                    }
                                </a>
                            </li>
                            }
                        }
                        else
                        {
                            <li>
                                <img src="/Images/@Parameters.Theme/product-image-not-found-400x.jpg" />
                            </li>   
                        }
                    </ul>
                </div>
                @{ bool thumbnailFounded = false; }
                @if (Parameters.ProductDetailShowSingleImage || (Model.ProductImages != null && Model.ProductImages.Count > 1))
                {
                    thumbnailFounded = true;
                    <div id="carousel" class="flexslider">
                        <ul class="slides">
                            @foreach (var productImage in Model.ProductImages)
                            { 
                                <li>
                                    <img src="@(Parameters.WebSiteImageUrl)/product-small/@(productImage.ProductId)_@(productImage.ImageId)_w.jpg" />
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
                if (!thumbnailFounded)
                {
@*<div style="height: 70px;"></div>*@
                }                              
            <script type="text/javascript">
                $(window).load(function ()
                {
                    $('#carousel').flexslider({
                        animation: "slide",
                        controlNav: false,
                        animationLoop: false,
                        slideshow: false,
                        itemWidth: 94,
                        itemMargin: 5,
                        asNavFor: '#slider'
                    });

                    $('#slider').flexslider({
                        animation: "slide",
                        controlNav: false,
                        animationLoop: true,
                        slideshow: false,
                        sync: "#carousel",
                        start: function (slider)
                        {
                            $('body').removeClass('loading');
                            $.removeData(".product-flexslider #slider img", 'elevateZoom');
                            $('.zoomContainer').remove();
                            $('li.flex-active-slide a img').elevateZoom({
                                loadingIcon: false,
                                responsive: true,
                                cursor: "zoom-in",
                                zoomType: "inner",
                                scrollZoom: true,
                            });
                        },
                        after: function ()
                        {
                            var active_rel = $(this).find('.flex-active-slide').attr('rel');
                            $.removeData(".product-flexslider #slider img", 'elevateZoom');
                            $('.zoomContainer').remove();
                            $('li.flex-active-slide a img').elevateZoom({
                                loadingIcon: false,
                                responsive: true,
                                cursor: "zoom-in",
                                zoomType: "inner",
                                scrollZoom: true,
                            });
                        }
                    });
                    $('.product-flexslider #slider a[rel=lightbox]').lightBox({
                        imageLoading: 'Images/@Parameters.Theme/lb05/lightbox-ico-loading.gif',
                        imageBtnClose: 'Images/@Parameters.Theme/lb05/lightbox-btn-close.png',
                        imageBtnPrev: 'Images/@Parameters.Theme/lb05/lightbox-btn-prev.png',
                        imageBtnNext: 'Images/@Parameters.Theme/lb05/lightbox-btn-next.png',
                        txtImage: 'Resim',
                        txtOf: '/',
                        keyToClose: 'k',
                        keyToPrev: 'n',
                        keyToNext: 'm'
                    });
                });
            </script>
        }
        <div class="clearfix"></div>
    </div>
    <div class="@productDetailsClass">
        <div class="product-titles">
            <h1>@Model.ProductName</h1>
            <div class="product-code">Ürün Kodu : @Model.ProductCode</div>
        </div>
        <div class="product-center">
            @if (Model.IsActive)
            {
                <div id="product-view-prices-div">
                    @{Html.RenderAction("ProductPrices", "Product", new { id = Model.ProductId });}
                </div>
                      if (Parameters.Theme == "HA")
                      {
                <div class="cart">
                    <div class="cart-top-padd">
                        @if (!Request.IsAuthenticated)
                        {
                            <div class="qtilabel">
                                <label>Sipariş verebilmek için <a href="/Account/Login" target="_top">Kaydol veya Giriş Yap</a></label>
                            </div>
                        }
                        else
                        {
                            <div class="qtilabel">
                                <label>Adet</label>
                            </div>
                            <div class="qtitext">
                                <input type="text" maxlength="2" class="input-qti" value="1" size="2" id="basic_qty_@Model.ProductId" />
                            </div>
                            <div class="qtibuttons">
                                <input type="button" onclick="basicQtyAdd();" class="plus" id="add1" />
                                <input type="button" onclick="basicQtyMinus();" class="minus" id="minus1" />
                                <input type="hidden" value="@(Model.ProductId)" name="productId" />
                            </div>
                            <div class="qtiinstallmentneeded">
                                @if (Model.InstallmentNeeded)
                                {
                                    <input id="InstallmentSelected" type="checkbox" name="InstallmentSelected" data-val-required="InstallmentSelected alanı gereklidir.">
                                    <label class="InstallmentSelectedText" for="InstallmentSelected">
                                        Kurulum İstiyorum
                     @if (Model.InstallmentPrice > 0)
                     {
                         <span>(@Model.InstallmentPrice.ToString("###,###,##0.00")
                             @(Model.Currency))</span>
                     }

                                    </label>
                                    <div class="clearfix"></div>
                                }
                            </div>
                                if (Model.variantPropertiesList.Count() >= 1)
                                {
                            <div class="variantList">
                                <select name="variantProduct">
                                    @foreach (var variant in Model.variantPropertiesList)
                                    {
                                        <option value="@variant.productId" @{if (ViewBag.SelectedProductId == variant.productId)
                                                                             {<text>selected="selected"</text>}}>@variant.value</option>
                                    }
                                </select>
                                <script>
                                    $("select[name=variantProduct]").change(function ()
                                    {
                                        $("a.addToCart").attr({ "id": "in_" + $(this).val() });
                                        $("button.orderNow").attr({ "id": "ord_" + $(this).val() });
                                        $("#product-view-prices-div").load('/Product/ProductPrices', { id: $(this).val() });
                                    });

                                </script>
                            </div>                     
                                }
                                if (Parameters.UseWishList)
                                {
                            <a class="addToCart" id="in_@Model.ProductId"><span class="sepet-icon"></span><span class="sepet-text">SEPETE EKLE</span></a>

                            <a class="addTooltip" id="prd_@Model.ProductId" onclick="addToWishList('@(Model.ProductId)');" title="Listeme Ekle">
                                <span class="sepet-icon"></span><span class="sepet-text">LİSTEME EKLE</span></a>

                                }
                                else
                                {
                            <a class="addToCart" id="in_@Model.ProductId"><span class="sepet-icon"></span><span class="sepet-text">SEPETE EKLE</span></a>
                            <a class="viewDetails" href="@Model.LinkUrl" target="_top"><span class="view-icon"></span><span class="view-text">İNCELE</span></a>
                                }
                        }
                    </div>
                    <div class="clearfix"></div>
                </div>
                      }
                      else
                      {
                <div>
                    @if (Model.variantPropertiesList.Count() >= 1)
                    {
                        <select name="variantProduct">
                            @foreach (var variant in Model.variantPropertiesList)
                            {
                                <option value="@variant.productId" @{if (ViewBag.SelectedProductId == variant.productId)
                                                                     {<text>selected="selected"</text>}}>@variant.value</option>
                            }
                        </select>   
                        <script>
                            $("select[name=variantProduct]").change(function ()
                            {
                                $("a.addToCart").attr({ "id": "in_" + $(this).val() });
                                $("button.orderNow").attr({ "id": "ord_" + $(this).val() });
                                $("#product-view-prices-div").load('/Product/ProductPrices', { id: $(this).val() });
                            });

                        </script>                      
                    }
                </div>
                <div class="clearfix"></div>
                <div class="cart">
                    <div class="cart-basket"></div>
                    <div class="cart-top">
                        @if (!Request.IsAuthenticated)
                        {
                            <div class="cart-top-padd">
                                <label>Sipariş için <a href="/Account/Login">Giriş Yapın</a></label>
                            </div>
                        }
                        else if (!Parameters.AllowEndedProducts && Model.InStockDepo <= 0)
                        {
                            <div class="cart-top-padd">
                                <label>Ürün tükendi.</label>
                            </div>
                        }
                        else
                        {
                            <div class="cart-top-padd">
                                <label>Adet:</label>
                                <input type="button" onclick="basicQtyMinus();" class="minus" id="minus1" />
                                <input type="text" maxlength="2" class="input-qti" value="1" size="2" id="basic_qty_@Model.ProductId" />
                                <input type="button" onclick="basicQtyAdd();" class="plus" id="add1" />
                                <input type="hidden" value="@(Model.ProductId)" name="productId" />
                            </div>
                            <div class="extra-button">
                                @if (Parameters.UseWishList)
                                {
                                    <div class="left">
                                        <a class="addToCart addTooltip" id="in_@Model.ProductId" title="Sepete Ekle">
                                            <img src="/Images/@(Parameters.Theme)/urun-hover-sepet.png" height="25" /></a>
                                    </div>                            
                                    <div class="left" style="margin-left: 5px;">
                                        <a class="addTooltip" id="prd_@Model.ProductId" onclick="addToWishList('@(Model.ProductId)');" title="Listeme Ekle" >
                                            <img src="/Images/@(Parameters.Theme)/urun-hover-list.png" height="25" /></a>
                                    </div>
                                }
                                else
                                {
                                    <div>
                                        <a class="addToCart" id="in_@Model.ProductId">Sepete At</a>
                                    </div>
                                }
                            </div>
                        }
                    </div>
                </div>
                <button class="orderNow" onclick="window.top.location.href='@Model.LinkUrl'" target="_blank">İncele</button>
                <div class="clearfix"></div>
                        if (Model.InstallmentNeeded)
                        {
                <div class="installment-needed">
                    @Html.CheckBoxFor(m => m.InstallmentSelected)
                    <label class="InstallmentSelectedText" for="InstallmentSelected">
                        Kurulum İstiyorum
                     @if (Model.InstallmentPrice > 0)
                     {
                         <text>(</text><span class="installment-needed-price">@Model.InstallmentPrice.ToString("###,###,##0.00")</span>
                         <span class="installment-needed-tax">@(Model.Currency)(KDV Dahil)</span><text>)</text>
                     }

                    </label>
                </div>
                <div class="clearfix"></div>
                        }
                        if (!string.IsNullOrEmpty(Parameters.FreeCitiesHtml) && (Model.FreeCargoInCity || (Model.InstallmentNeeded && Model.FreeInstallmentInCity)))
                        {
                <div class="freeCCI bg-info bs-bgb">
                    <div>
                        <span class="glyphicon glyphicon-info-sign"></span>
                        @if (Model.FreeCargoInCity && (Model.FreeInstallmentInCity && Model.InstallmentNeeded))
                        {
                            <text>Kargo ve Kurulumun Ücretsiz Olduğu Şehirler:</text>
                        }
                        else if (Model.FreeCargoInCity)
                        {
                            <text>Kargonun Ücretsiz Olduğu Şehirler:</text>
                        }
                        else if (Model.FreeInstallmentInCity)
                        {
                            <text>Kurulumun Ücretsiz Olduğu Şehirler:</text>
                        }
                    </div>
                    @Html.Raw(@Parameters.FreeCitiesHtml)
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
                        }
                      }
            }
            else
            {
                <text>Bu ürün geçici olarak temin edilememektedir. Anlayışınız için teşekkür ederiz.</text>
            }
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
    @if (Parameters.Theme != "JB")
    {
        <div class="col-xs-8 first last prod-warranty">
            @if (Model.BrandBannerActive)
            {
                <div class="category-banner">
                    <img src="@(Parameters.WebSiteImageUrl)/category-banner/@(Model.BrandId).jpg" alt="@Model.Brand" />
                </div>
            }
            else if (Model.CategoryBannerActive)
            {
                <div class="category-banner">
                    <img src="@(Parameters.WebSiteImageUrl)/category-banner/@(Model.CategoryId).jpg" alt="@Model.Category" />
                </div>
            }
            else
            {
                <div class="category-banner">
                    @Html.Raw(Parameters.ProductPageDescriptionWide)
                </div>            
            }
            <div class="clearfix"></div>
        </div>
            if (!string.IsNullOrEmpty(Parameters.ProductPageDescriptionSmall))
            {
        <div class="col-xs-4 product-installment">
            @Html.Raw(Parameters.ProductPageDescriptionSmall)
            <div class="clearfix"></div>
        </div>
            }
    }
</div>
<div class="clearfix"></div>

<!--tab-->
<script type="text/javascript">
    $(function ()
    {
        if (self == top)
        {
            window.location.href = '@Model.LinkUrl';
        }
    });
    $('a.cgLink222').click(function ()
    {
        var qsId = $(this).attr('id').split("_")[1];
        $('#content').load('/Categories/Get', { id: qsId });
        return false;
    });

    $('a.prLink222').click(function ()
    {
        var qsId = $(this).attr('id').split("_")[1];
        $('#content').load('/Products/Get', { id: qsId });
        return false;
    });

    $('a.addToCart').click(function ()
    {
        var qsId = $(this).attr('id').split("_")[1];
        var qty = $('#basic_qty_' + qsId.toString()).val();
        var ins = $('#InstallmentSelected').attr('checked') ? "True" : "False";
        if ('@Model.InstallmentNeeded' == 'True' && ins == 'False')
        {
            var answer = confirm("Kurulum isteği olmadan işleme devam edilsin mi?")
            if (!answer)
            {
                return false;
            }
        }
        var parentBody = window.parent.document.body;
        //alert("qsId="+qsId+", qty="+qty+", ins="+ins)
        if ($(window).load('/Cart/Insert', { id: qsId, qty: qty, installment: ins }))
        {
            $('#sepetMinimalContent').load('/Cart/GetMinimal', { showPhotos: true });
            alert("Ürün sepete eklendi.");
        }
        else
        {
            alert("Ürün sepete eklenirken bir hata oluştu.");
        }
        return false;
    });

    function basicQtyAdd()
    {
        var q = $('#basic_qty_@(Model.ProductId)').val();
        if (q < 99)
        {
            q++;
            $('#basic_qty_@(Model.ProductId)').val(q);
        }
    }
    function basicQtyMinus()
    {
        var q = $('#basic_qty_@(Model.ProductId)').val();
        if (q > 1)
        {
            q--;
            $('#basic_qty_@(Model.ProductId)').val(q);
        }
    }
</script>
@if (Parameters.Theme == "BT")
{ 
    <script type="text/javascript">
        $('div.toCart a.addToCart img').attr({ 'src': '', 'alt': '' });
        $('div.toCart a.addToCart').attr({ 'class': 'addToCart exclusive ajax_add_to_cart_button btn_add_cart' });
        $(' .summary .description .cart .addToCart img').attr({ 'src': '' });
    </script>
}